<template>
  <div>
    <h1>{{ msg }}</h1>
    <div class="content_s">
      接收基座发送过来的消息：{{ counts }}
      <span @click="sendMessageMaster()">发送消息到基座</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import actions from '../shared/actions';
defineProps<{ msg: string }>();

const counts = ref(0);

// 发送消息给基座
const sendMessageMaster = () => {
  actions.setGlobalState({
    count: counts.value + 1,
  });
}

onMounted(() => {
  // 接收基座发送过来的数据信息
  // 注册观察者函数：onGlobalStateChange 第一个参数为函数回调，第二个参数为true,表示立即执行一次观察者函数
  actions.onGlobalStateChange((state: { count: number }) => {
    const { count } = state;
    counts.value = count;
  }, true);
})

</script>
<style scoped>
  .content_s {
    padding: 10px;
    height: 50px;
    background: brown;
    margin-bottom: 20px;
    color: white;
    display: flex;
    align-items: center;
  }

  span {
    padding: 10px;
    background: rgb(11, 181, 130);
    cursor: pointer;
    margin-left: 50px;
    border-radius: 5px;
  }
</style>
